<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>Document</title>
</head>

<!-- 
                watch和computed区别?
                            1.computed能完成的功能,watch都可以完成
                            2.watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作
                两个重要小原则:
                                1.所被Vue管理的函数最好写成普通函数,这样this指向才是Vm 或 组件实例对象
                                2.所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等等),最好写成箭头函数,这样this的指向才是Vm 或组件实例对象
                            
                关于为什么computed不能使用异步函数
                            1.因为retrun返回给了setTimeout下的箭头函数，根本不会返回给fullName，因此在计算属性中根本不肯能进行异步操作

                在Vue下定时器下的回调函数为什么可以写成箭头函数,而不能写成普通函数??
                            1.不是说Vue所管理的函数不能写成箭头函数吗？为什么setTimeout下写成了箭头函数?
                                    (1).setTimeout不是Vue所管理的函数，而是在Vue所管理的函数里边
                                    (2).定时器确实在fistName中开启的,但是定时器所指定的回调是不受Vue控制的,而是浏览器定时器管理模块控制的,最后定时器到点了也是JS引擎帮忙调用的
                            2.为什么箭头函数改成function里边的this指向了window??
                                        (1).箭头函数this指向上下文的this,而普通函数是谁调用的指向谁,很显然,定时器中的回调函数通过浏览器使得JS引擎调用的,指向window
                                            而箭头函数上下文是firstName里边的this,而firstName是Vue管理的函数,肯定指向Vue实例,Vm


                     注意: 可以写成普通函数前提是在外部定义变量接受指向VUE实例的this,使用闭包的方法,在回调函数里边使用变量表示this
 -->

<body>
    <div id="root">
        姓：<input type="text" v-model="firstName"><br>
        名：<input type="text" v-model="lastName"><br>
        全名：<span>{{fullName}}</span>
    </div>
    <script>
        Vue.config.productionTip = false; //以阻止vue在启动时生成生产提示
        const Vm = new Vue({

            // 目前需求：要求当我更改姓和名的时候全名等待1秒再发生变化
            el: "#root",
            data: {
                firstName: "",
                lastName: "",
                fullName: ""
            },

            computed: {
                // fullNmae() {
                //     setTimeout(() => {
                //         return this.firstName + "-" + this.lastName
                //     }, 1000)
                // }

                // 这样不可以，因为retrun返回给了setTimeout下的箭头函数，根本不会返回给fullName，因此在计算属性中根本不肯能进行异步操作

            },
            watch: {
                firstName(val) {
                    setTimeout(() => {
                        this.fullName = val + "-" + this.lastName
                    }, 1000)

                    // 1.不是说Vue所管理的函数不能写成箭头函数吗？为什么setTimeout下写成了箭头函数?
                    //            (1).setTimeout不是Vue所管理的函数，而是在Vue所管理的函数里边
                    //            (2).定时器确实在fistName中开启的,但是定时器所指定的回调是不受Vue控制的,而是浏览器定时器管理模块控制的,最后定时器到点了也是JS引擎帮忙调用的
                    // 2.为什么箭头函数改成function里边的this指向了window??
                    //            (1).箭头函数this指向上下文的this,而普通函数是谁调用的指向谁,很显然,定时器中的回调函数通过浏览器使得JS引擎调用的,指向window
                    //                而箭头函数上下文是firstName里边的this,而firstName是Vue管理的函数,肯定指向Vue实例,Vm

                },
                lastName(val) {
                    this.fullName = this.firstName + "-" + val
                }
            }
        })
    </script>

</body>

</html>